<template>
	<view class="index">
		<!-- <view class="search">
			<view class="status_bar"></view>
			<view class="search-box">
				<u-search placeholder="请输入关键字" v-model="keyword" bgColor="rgb(153 24 185 / 0%)"
					searchIconColor="#2FA0F3" color="#FFFFFF" @search="_search" @clear="_search"></u-search>
				<view @tap="_uploadVideo">
					<image :src="imageUrl" :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }"></image>
				</view>
			</view>
		</view> -->
		<view class="index_top__bg"></view>
		<view class="status_bar"></view>
		<view class="search">
			<image class="search_logo" src="@/static/xinjiang/logo_mini.png" mode=""></image>
			<view class="search_input__box">
				<image src="@/static/xinjiang/search.png" mode="aspectFit" class="search_icon"></image>
				<input type="text" class="search_input" placeholder="搜索你喜欢的电影或电视剧...">
			</view>
		</view>

		<!-- <view class="menu">
			<view class="menu-content">
				<u-tabs :list="list" :current="current" @change="change" bg-color="transparent" :activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'

				}" inactive-color="#909090" custom-class="custom-tabs-bg"></u-tabs>
			</view>
			<view class="menu-icon" @click="show = true">
				<u-icon name="grid" size="36"></u-icon>
			</view>
		</view>
		<view class="tab-list">
			<view class="tab-item" @click="news">
				<image src="../static/news.png" mode=""></image>
				<view>
					资讯
				</view>
			</view>
			<view class="tab-item" @click="sq">
				<image src="../static/community.png" mode=""></image>

				<view>
					社区
				</view>
			</view>
			<view class="tab-item" @click="shuaship">
				<image src="../static/video.png" mode=""></image>
				<view>
					刷视频
				</view>
			</view>
			<view class="tab-item" @click="fb">
				<image src="../static/pub.png" mode=""></image>
				<view>
					发布
				</view>
			</view>
		</view> -->
		
		<scroll-view scroll-y class="scroll" @scrolltolower="_loadmore">
			<view class="scroll-box">
				<view class="swiper-box">
					<u-swiper :list="ad_list" title effect3d bg-color="transparent"></u-swiper>
				</view>
				
				<view class="index_menu">
					<view class="index_menu__box" @click="jumpTo('/pages/movie/movie', 1)">
						<view class="index_menu__item index_menu__bg1">
							<image class="index_menu__img" src="@/static/xinjiang/menu1.png" mode="aspectFit"></image>
						</view>
						<text class="index_menu__text">在线影院</text>
					</view>
					<view class="index_menu__box" @click="jumpTo('/pages/home/home', 3)">
						<view class="index_menu__item index_menu__bg2">
							<image class="index_menu__img" src="@/static/xinjiang/menu2.png" mode="aspectFit"></image>
						</view>
						<text class="index_menu__text">精彩短剧</text>
					</view>
					<view class="index_menu__box">
						<view class="index_menu__item index_menu__bg3" @click="jumpTo('/pages/my/DiamondRecharge/DiamondRecharge')">
							<image class="index_menu__img" src="@/static/xinjiang/menu3.png" mode="aspectFit"></image>
						</view>
						<text class="index_menu__text">钻石充值</text>
					</view>
					<view class="index_menu__box" @click="jumpTo('/pages/my/openVip/openVip')">
						<view class="index_menu__item index_menu__bg4">
							<image class="index_menu__img" src="@/static/xinjiang/menu4.png" mode="aspectFit"></image>
						</view>
						<text class="index_menu__text">开通会员</text>
					</view>
				</view>
				
				<view class="tabbar">
					<v-tabbar />
				</view>

				<!-- <view class="title">
					<image src="/static/left-image.png" alt="Left Image" class="left-image" />
					</image><span class="text">今日最新发布</span>
					<image src="/static/right-image.png" alt="Right Image" class="right-image" />
					</image>
				</view> -->
				
				<view class="index_list__box">
					<view class="index_title">
						<view class="index_title__left">
							<image src="@/static/xinjiang/new.png" mode="aspectFit" class="index_title__icon"></image>
							<text class="index_title__text">最新电影</text>
						</view>
						<image src="@/static/xinjiang/right_arrow.png" mode="aspectFit" class="index_title__arrow"></image>
					</view>
					
					<view class="list">
						<view class="list-item" :class="{'mr_30': index % 2 === 0}" v-for="(item, index) in video_list"
							:key="item.id" @tap="_play(item)">
							<image class="list-img" :src="item.thumb" mode="aspectFill"></image>
							<view class="list-text">
								<view class="u-line-1 list-title">{{ item.title }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="loading-text" v-if="loading_more">加载更多中...</view>
				<view class="loading-text" v-if="is_last">没有更多了</view>
			</view>
		</scroll-view>

		<u-popup v-model="show" mode="right" width="70%">
			<view class="menu-popup">
				<view class="status_bar"></view>
				<view class="menu-popup_title">导航</view>
				<u-line />
				<view class="menu-popup_content">
					<view class="menu-popup_item" v-for="(item, index) in list" :key="item.id" @click="change(index)">{{ item.name
					}}</view>
				</view>
			</view>
		</u-popup>

		<uni-popup ref="popup" type="center">
			<view class="popup-container">
				<view class="popup-box">
					<view class="popup-head">
						<text class="popup-head-title">公告</text>
					</view>
					<view class="popup-text" v-if="config">
						<text class="index_notice__text">{{ config.base_pop_notice }}</text>
					</view>
				</view>
				<image class="popup-close" src="@/static/macos-close.png" mode="aspectFit" @tap="_closePopup"></image>
			</view>
		</uni-popup>
		<aModel v-if="status" :title="title" @closeModel="modelCancel" @confirmModel="confirmModel"
			:content="locationContent" :bgColor="bgColor"></aModel>
		<view class="nav-bar">
			<nav-bar></nav-bar>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/v-tabbar/v-tabbar.nvue'
	import aModel from '@/components/xghc-accredit/index.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		VList,
		AD,
		Categories,
		BuyVideo
	} from '@/common/api.js'
	import {searchVideo} from '@/js_sdk/video.js'

	export default {
		data() {
			return {
				keyword: '',
				list: [],
				current: 0,
				video_list: [],
				page: 1,
				ad_list: [],
				is_last: false,
				loading_more: false,
				init: true,
				show: false,
				category_id: '',
				title: "",
				status: false,
				bgColor: '#FF448F',
				locationContent: '',
				imageUrl: '/static/pub-2.png',
				imageWidth: 16,
				imageHeight: 16,
			}
		},
		components: {
			NavBar,
			aModel
		},
		computed: {
			...mapState(['config', 'token', 'userinfo'])
		},
		onLoad() {
			this._videoList()
			this._adList()
			this._cagegory()
		},
		onShow() {
			uni.startPullDownRefresh()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success() {
					this.page = 1
					VList({
						page: this.page,
						limit: 20,
						category_id: this.category_id,
						keyword: this.keyword
					}).then(({
						code,
						data
					}) => {
						this.loading_more = false
						this.init = false
						if (code === 200) {

							const {
								list,
								current_page,
								total_page
							} = data
							this.video_list = list
							if (current_page >= total_page) {
								this.is_last = true
							}
						}

					})
				},
				fail() {

				}
			})
			uni.stopPullDownRefresh()
		},
		onReady() {
			setTimeout(() => {
				try {
					const bool = uni.getStorageSync('index_popup')
					if (!bool) {
						this._openPopup()
					}
				} catch (e) {
					// error
				}
			}, 1000)
		},
		methods: {
			...mapMutations(['SET_NAV_INDEX']),
			jumpTo(url, index) {
				if (index > -1) {
					this.SET_NAV_INDEX(index)
				}
				uni.navigateTo({ url })
			},
			confirmModel() {
				console.log("确认");
				this.status = false;
			},
			modelCancel() {
				this.status = false;
			},
			xs() {
				uni.navigateTo({
					url: `/pages/novel/index`
				})
			},
			mh() {
				uni.navigateTo({
					url: `/pages/novel/cartoon`
				})
			},
			news() {
				// pages/newsList/index
				uni.navigateTo({
					url: `/pages/newsList/index`
				})
			},
			zb() {
				uni.navigateTo({
					url: `/pages/live/live`
				})

			},
			shuaship() {
				uni.navigateTo({
					url: `/pages/home/home`
				})


			},
			fb() {
				// /pages/my/agent/agent
				uni.navigateTo({
					url: `/pages/upload-video/upload-video`
				})
			},
			wd() {
				return uni.showToast({
					title: '问答模块正在开发中',
					icon: 'none'
				})
			},
			sq() {

				uni.navigateTo({
					url: `/pages/message/message`
				})
			},
			_play(item) {
				uni.navigateTo({
					url: `/pages/movie/movie_detail?id=${item.id}`
				})
				return;
				const {
					vip_share_free_num,
					is_vip,
					share_free_num
				} = this.userinfo
				const price = Number(item.price)
				const _paid = this.config.base_video_price === '1' && price > 0
				if (is_vip === 0) {
					if (_paid) {
						this._paid(item.id, price)
					} else {
						// if (share_free_num < 1) {
						// 	return uni.showToast({
						// 		title: '免费观看次数已用完',
						// 		icon: 'none'
						// 	})
						// } else {
						// 	uni.navigateTo({
						// 		url: `/pages/player?id=${item.id}`
						// 	})
						// }
						uni.navigateTo({
							url: `/pages/player?id=${item.id}`
						})
					}
				} else {
					if (vip_share_free_num < 1 && _paid) {
						this._paid(item.id, price)
					} else {
						uni.navigateTo({
							url: `/pages/player?id=${item.id}`
						})
					}
				}
			},
			// 付费弹层
			_paid(data_id, price) {
				BuyVideo({
					data_id,
					check: 1
				}).then(({
					code
				}) => {
					if (code === 400) {
						this.title = '付费提示'
						this.locationContent = `观看当前视频需付费${price}个金币~`
						this.status = true;
						// uni.showModal({
						//     title: '付费提示',
						//     content: `观看当前视频需付费${price}个金币~`,
						//     success: (res) => {
						//         if (res.confirm) {
						// 			this._buyVideo(data_id)
						//         } else if (res.cancel) {
						//             console.log('用户点击取消')
						//         }
						//     }
						// })
					} else {
						uni.navigateTo({
							url: `/pages/player?id=${data_id}`
						})
					}
				})
			},
			_buyVideo(data_id) {
				uni.showLoading()
				BuyVideo({
					type: 'GOLD',
					data_id
				}).then(({
					code,
					msg
				}) => {
					uni.hideLoading()
					uni.showToast({
						title: msg,
						icon: 'none'
					})
					if (code === 200) {
						uni.navigateTo({
							url: `/pages/player?id=${data_id}`
						})
					}
				})
			},
			_uploadVideo() {
				uni.navigateTo({
					url: '/pages/upload-video/upload-video'
				})
			},
			_cagegory() {
				this.list = [{
					name: '推荐',
					id: ''
				}]
				Categories({
					pid: 1
				}).then(({
					code,
					data
				}) => {
					if (code === 200) {
						this.list = this.list.concat(data)
					}
				})
			},
			_loadmore() {
				if (this.is_last) return
				this.loading_more = true
				this.page++
				this._videoList()
			},
			_adList() {
				AD({
					type: 2
				}).then(({
					code,
					data
				}) => {
					data.map(item => {
						this.ad_list.push({
							title: item.desc,
							image: item.img_url
						})
					})
				})
			},
			_videoList() {
				searchVideo({
					page: this.page,
					limit: 20,
					type: 'MOVIE'
				}).then(({
					code,
					data
				}) => {
					this.loading_more = false
					this.init = false
					if (code === 200) {
						const {
							list,
							current_page,
							total_page
						} = data
						if (current_page === 1) {
							this.video_list = list
						} else {
							this.video_list = this.video_list.concat(list)
						}
						if (current_page >= total_page) {
							this.is_last = true
						}
					}
					uni.stopPullDownRefresh()
				})
				// VList({
				// 	page: this.page,
				// 	limit: 20,
				// 	category_id: this.category_id,
				// 	keyword: this.keyword
				// }).then(({
				// 	code,
				// 	data
				// }) => {
				// 	this.loading_more = false
				// 	this.init = false
				// 	if (code === 200) {
				// 		const {
				// 			list,
				// 			current_page,
				// 			total_page
				// 		} = data
				// 		if (current_page === 1) {
				// 			this.video_list = list
				// 		} else {
				// 			this.video_list = this.video_list.concat(list)
				// 		}
				// 		if (current_page >= total_page) {
				// 			this.is_last = true
				// 		}
				// 	}
				// 	uni.stopPullDownRefresh()
				// })
			},
			change(index) {
				this.show = false
				this.video_list = []
				this.current = index
				this.category_id = this.list[index].id
				this.page = 1
				this.is_last = false
				this.init = true
				this._videoList()
			},
			_search() {
				this.video_list = []
				this.page = 1
				this.is_last = false
				this.init = true
				this._videoList()
			},
			_openPopup() {
				this.$refs.popup.open('center')
				try {
					uni.setStorageSync('index_popup', true)
				} catch (e) {
					// error
				}
			},
			_closePopup() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("index.scss");
</style>